<template>
  <a-layout id="app">
    <a-layout-sider>
      <div class="layout-title">校招管理系统</div>
      <a-menu theme="dark" mode="inline" :default-selected-keys="['1']">
        <router-link
          to="/"
          v-slot="{ isExactActive, href }"
        >
          <nav-link :isExactActive="isExactActive" :href="href" />
        </router-link>
        <router-link
          to="/report"
          v-slot="{ isExactActive, href }"
        >
          <nav-link :isExactActive="isExactActive" :href="href" type="report" />
        </router-link>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-content class="layout-content">
        <router-view />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
import NavLink from "@/components/NavLink";

export default {
  name: 'App',
  components: {
    'nav-link': NavLink
  }
}
</script>

<style lang="less">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;

  .layout-title {
    line-height: 50px;
    color: #fff;
  }

  .layout-content {
    margin: 10px;
    padding: 24px;
    background: #fff;
  }
}
</style>
